<template>
  <!-- 排行榜右边内容组件 -->
  <div class="right_content">
    <RankingListDetail
      @ranking-list-pic-click="rankingListPicClick"
      @add-all-song-to-music-list="addAllSongToMusicList"
    ></RankingListDetail>
    <SongItem @add-play-song="addPlaySong"></SongItem>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import RankingListDetail from "@/components/rankinglistChild/RankingListDetail.vue";
import SongItem from "@/components/songitem/SongItem.vue";
export default defineComponent({
  name: "RightContent",
  components: {
    RankingListDetail,
    SongItem,
  },
  setup(props, context) {
    // 点击榜单的图片事件
    let rankingListPicClick = () => {
      context.emit("rankingListPicClick");
    };
    let addPlaySong = (item) => {
      context.emit("addPlaySong", item);
    };
    let addAllSongToMusicList = () => {
      context.emit("addAllSongToMusicList");
    };
    return { rankingListPicClick, addPlaySong, addAllSongToMusicList };
  },
});
</script>
<style scoped>
.right_content {
  flex: 1;
  padding: 30px 40px;
  overflow: hidden;
}
</style>
